Easy2Siksha.com
2024
/
( )
: 3 :75
: ,
-
1.
2. (WWW)
-
3. - -
4. ? ?
-
Easy2Siksha.com
5. ,
, - ?
6. iframe (, )
, iframe
? 15
-
15 7. ?
?
8. ?
,
?
Easy2Siksha.com
2024
/
( )
: 3 :75
: ,
-
1.
: ? ( )
:
• ( , , ) =
• ( , -, ) =
• (, , ) =
,
:
=
—
Easy2Siksha.com
?
:
?
1960-70 ,
ARPANET ( )
, ,
:
•
•
•
•
•
•
•
,
( )
, :
1. ( google.com)
2.
3.
4.
5.
6.
!
( )
Easy2Siksha.com
:
•
•
•
•
•
,
:
2
:
•
•
•
•
•
•
•
,
( )
(WWW)
Easy2Siksha.com
:
•
•
•
•
•
,
:
=
=
:
•
•
•
•
•
:
•
• (-)
•
•
•
•
Easy2Siksha.com
•
:
•
•
•
•
•
•
, ,
, -
:
•
•
•
•
•
8-
:
•
•
Easy2Siksha.com
•
•
•
, :
1. /
2.
3.
4. ( )
5.
-
:
•
•
•
•
Easy2Siksha.com
•
•
•
•
,
, , , ,
2. (WWW)
: :
,
• : , (
TCP/IP)
• : 1960
(ARPANET)
• : , ,
• :, (), ,
—
,
:
WWW ,
• :
( )
Easy2Siksha.com
• :1989-1990 - ,
• :
o ( )
o
o ( , )
o HTTP/HTTPS
WWW , -
WWW
:
•
•
—
:
1. : ,
2. :
3. :, ,
4. :
5. :, -
• :
• : ,
• :
• :-
• : ,
:
Easy2Siksha.com
•
• , ,
—
—
, ,
,
• =
• WWW =
:
, ,
-
3. - -
:- ?
-
:
1.
2.
3.
4.
—
- :
Easy2Siksha.com
• PHP
•
•
• .
• .
:
•
•
?
1.
2.
3. :
4.
:
•
•
•
-
- ?
- ( )
,
- :
•
Easy2Siksha.com
:
•
•
•
:
“ ”
:
•
•
-
:
• - =
• - =
:
•
•
--
-
1.
2.
Easy2Siksha.com
3.
4.
5.
-
1.
2. /
3.
4.
(-)
-
•
•
•
•
→
-
•
•
•
•
UI →
Easy2Siksha.com
-
,
:
•
•
•
•
-
( )
:
•
•
•
•
-
-
•
•
•
•
•
•
Easy2Siksha.com
-
•
•
•
•
•
•
:
-:
•
• " "
•
•
-:
•
•
•
•
:
-
-
PHP, ,
Easy2Siksha.com
- -
- ,
HTML
, -
,
4. ? ?
: ?
• :
, , ,
• :
• : (<h1>, <p>, <img>,
)
, HTML ,
—
1. :, , ,
2. :<a>
3. : ,
4. : <>, <> <>
5. : ,
Easy2Siksha.com
,
2.0
1995
;
3.2
1997
,
4.01
1999
, ,
//
XHTML 1.0
2000
XML- ;
5
2014
(, , ), (, ),
,
5.1
5.2
2016-
2017
, ,
WHATWG ,
HTML HTML5
1. :
o 4.01 ,
o HTML5 :
<!DOCTYPE html>
2. :
o <div>
o HTML5 <header>, <nav>, <section>, <article> ,
3. :
o HTML 4.01 , - (
)
o HTML5 <audio> <video>
4. :
o HTML5 , , ,
5. :
Easy2Siksha.com
o HTML5 , , - -
API
o
6. - :
o HTML5 ,
o
HTML5
HTML5 :
• ,
•
• ,
HTML HTML 2.0 3.2
HTML5 ,
•
• HTML5 , ,
,
, ,
-
5. ,
, - ?
: ? ( )
:
“ HTML ”
Easy2Siksha.com
CSS :
1. ( , , )
2. ( , , , )
:
16px
:
{ : ; : ;}
:
+
-
1. — “ ?”
CSS HTML
:
p { : ;}
:
p =
: " "
:
<p>
:
• p →
• h1 →
Easy2Siksha.com
• .className →
• #idName →
:
h1 { : ;}
: <h1>
2. — “ ?”
{ }
:
p { : ; : 16px;}
{ }
3. — “ ”
:
: ;
CSS
4. — “ ?”
:
•
Easy2Siksha.com
•
•
•
•
•
:
: ;
5. — “ ?”
:
•
• 16px
•
•
•
:
: 16px;
:
• =
• = 16px
CSS :
h1 { : ; : 32px; : ;}
:
• → h1
Easy2Siksha.com
• → { ... }
• →
• → , ,
• → , 32px,
:
“ h1 , 32px ”
( )
:
" "
:
• →
• →
• →
• →
:
.blue-shirt { stand: up;}
, ,
+
:
<p> </p>
:
p { : ; : 18px;}
:
Easy2Siksha.com
:
✔
✔ { }
✔:
✔ ;
:
p { : ;}
:
=
( )
CSS :
1.
p { : ; }
2.
.note { : ; }
3.
# { : ; }
:
Easy2Siksha.com
{ - : ;}
h1 { : ;}
p { - : 1.6;}
=
:
=
=
:
•
=
• =
CSS HTML CSS
HTML
,
,
( , ) ,
, CSS
,
6. iframe (, )
, iframe
?
: ?
• : HTML <iframe>
• : ()
• :
Easy2Siksha.com
< src="https://www.example.com" width="600" height="400"></ >
, src ,
width height
<iframe> :
1. src URL
2.
3.
YouTube
, Google
iframe
1. YouTube :
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen></iframe>
2. :
<iframe
src="https://www.google.com/maps/embed?..."></iframe>
3. :
<iframe src="https://www.wikipedia.org" width="800" height="600"></iframe>
Easy2Siksha.com
iframe ?
1.
• ( , , )
•
2.
• ( , ,
)
•
3. -
• ,
•
4.
•
•
, - :
• :
• : ,
• :
• : iframe
( )
- ,
( ) ,
Easy2Siksha.com
, ,
, - ,
-
7. ?
?
:
- , , ,
- - , , ,
:
• - →
• - →
CSS
?
, :
CSS HTML
:
p { : ;}
<p> ()
1.
Easy2Siksha.com
()
- , ""
:
• →
• →
• →
- , :
" "
CSS
h1 { color: red;}
h2 { : ;}
h3 { : ;}
3 ( )
CSS
h1, h2, h3 { : ;}
Easy2Siksha.com
:
•
•
•
•
•
p, li, span { font-family: Arial;}
, {
: 10px;}
2.
—
()
HTML -
:
•
•
:
“ ”
Easy2Siksha.com
<div class="box"> <p> </p></div>
<p> </p>
. { : ;}
:
.box <p>
:
• →
• →
:
{ }
:
nav a { - : none;}
ul li { list-style: square;}
. h2 { : ;}
-
Easy2Siksha.com
:
.header .menu li a { color: white;}
:
• li
• .menu
• .header
:
•
•
•
•
•
,
h1, h2
. p
+
:
.card h2, .card p { : ;}
:
Easy2Siksha.com
.card h2 p
1.
→
2.
CSS, HTML
3.
4.
5.
:
<div class="product"> <h2> </h2> <p>: ₹20000</p></div>
:
.product h2 { : ;}
.product p { : ;}
,
Easy2Siksha.com
( )
:
= ()
= ()
,
• ,
• ,
CSS , HTML
, ,
8. ?
,
?
:: HTML
, HTML ,
:
• <nav> :
• <ul> ( ):
• <li> ( ):
• <a> ( ):
: HTML
<>
Easy2Siksha.com
<>
<>< ="."> </></>
<li><a href="about.html"> </a></li>
<li><a href="services.html"> </a></li>
<li><a href="contact.html"> </a></li>
</ul>
</nav>
CSS , —
CSS :
1. :
o : ; -;
o justify-content: space-around; space-between;
o position: fixed;
2. :
o -:
o :
o
o -
3. :
o : -
o :
4. :
o - , - -
: CSS
nav {
-: #333;
}
nav ul {
--: ;
: 0;
: 0;
Easy2Siksha.com
: ;
}
nav ul li {
: 0 15px;
}
{
;
-: ;
: 10px;
}
nav ul li a:hover {
: #555;
-: 5px;
}
, :
nav ul {
: ;
}
nav ul li {
: 10px 0;
}
CSS
1. :
o @media
o :
2. :
o CSS :hover
/
3. :
o
Easy2Siksha.com
o :
4. :
o position: fixed; top: 0;
o : ;
CSS ?
• : —
,
• :
• :,
• :CSS ,
:
•
• —, ,
•
HTML CSS
• <nav>, <ul>, <li> <a>
• , ,
CSS —
, , ,
“
, ”
